<template>
  <!-- 歌手详情 -->
  <div class="mod-ard">
    <div class="container" v-if="artistDetail.artist">
      <div class="ard-hd clearfix">
        <div class="ard-hd-bg">
          <img :src="artistDetail.artist.cover" alt="" class="ard-bg-pic" />
          <div class="ard-hd-pic">
            <img :src="artistDetail.artist.cover" alt="" class="ard-pic" />
          </div>
        </div>
        <div class="ard-title-box">
          <h1 class="ard-title">{{ name }}</h1>
        </div>
        <div class="ard-hd-btn">
          <el-button
            v-if="artistDetail.user"
            @click="clickUser(artistDetail.user.userId)"
            >个人主面</el-button
          >
          <el-button>收藏</el-button>
        </div>
      </div>

      <div class="ard-left">
        <div class="ard-nav">
          <ul class="clearfix">
            <li
              v-for="(item, index) in nav"
              :key="index"
              :class="[
                'ard-nav-item',
                { 'ard-nav-item-current': currentIndex == index },
              ]"
              @click="itemClick(index, id)"
            >
              <h2>
                <a href="javascript:;">{{ item }}</a>
              </h2>
            </li>
          </ul>
        </div>
        <div
          :class="[
            'ard-router',
            { 'ard-router-l': currentIndex == 0 },
            { 'ard-router-r': currentIndex == 3 },
          ]"
        >
          <router-view
            :mvSize="mvSize"
            :artist="name"
            :briefDesc="briefDesc"
          ></router-view>
        </div>
      </div>

      <div class="ard-relative">
        <div class="ard-relative-box" v-if="showArtists">
          <h2 class="ard-relative-hd">相似歌手</h2>
          <ul class="ard-artists clearfix">
            <li class="ard-artists-item" v-for="item in artists" :key="item.id">
              <a
                class="ard-artist-pic"
                href="javascript:;"
                :title="item.name"
                @click="clickArtist(item.id)"
              >
                <img :src="item.img1v1Url" :alt="item.name" />
              </a>
              <h4 class="ard-artists-name">
                <a
                  class="ard-artists-txt"
                  href="javascript:;"
                  :title="item.name"
                  @click="clickArtist(item.id)"
                >
                  {{ item.name }}</a
                >
              </h4>
            </li>
          </ul>
        </div>
        <div class="ard-relative-box" v-if="showFans">
          <h2 class="ard-relative-hd">歌手粉丝</h2>
          <ul class="ard-fans clearfix">
            <li
              class="ard-fans-item"
              v-for="item in fans"
              :key="item.userProfile.userId"
            >
              <a
                class="ard-artist-pic"
                href="javascript:;"
                :title="item.userProfile.nickname"
                @click="clickUser(item.userProfile.userId)"
              >
                <img
                  :src="item.userProfile.avatarUrl"
                  :alt="item.userProfile.nickname"
                />
              </a>
              <h4 class="ard-fans-name">
                <a
                  class="ard-fans-txt"
                  href="javascript:;"
                  :title="item.userProfile.nickname"
                  @click="clickUser(item.userProfile.userId)"
                >
                  {{ item.userProfile.nickname }}</a
                >
              </h4>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <no-resource v-if="code == 404"></no-resource>
  </div>
</template>

<script>
import NoResource from "views/notfound/NoResource";
import ArtistAlbum from "views/artist/child/ArtistAlbum";
import ArtistDesc from "views/artist/child/ArtistDesc";
import ArtistMv from "views/artist/child/ArtistMv";
import ArtistSong from "views/artist/child/ArtistSong";

export default {
  components: {
    NoResource,
    ArtistAlbum,
    ArtistDesc,
    ArtistMv,
    ArtistSong,
  },
  data() {
    return {
      artistDetail: {},
      // 相似歌手
      artists: [],
      fans: [],
      id: "",
      nav: ["热门作品", "所有专辑", "相关MV", "艺人介绍"],
      path: ["/artist", "/artist/album", "/artist/mv", "/artist/desc"],
      currentIndex: 0,
      albumSize: 0,
      mvSize: 0,
      briefDesc: "",
      name: "",
      showArtists: false,
      showFans: false,
      code: 200,
    };
  },
  mounted() {
    this.currentIndex = this.path.indexOf(this.$route.path);
    this.id = this.$route.query.id;
    this.getArtistDetail();
    this.getSimiArtist();
    this.getArtistFans();
    console.log("111");
  },
  methods: {
    clickUser(id) {
      this.playUserDetail(id);
    },
    clickArtist(id) {
      this.playArtistDetail(id);
    },
    itemClick(index, id) {
      this.currentIndex = index;
      this.$router.push({
        path: this.path[index],
        query: { id: id },
      });
    },
    getArtistFans() {
      this.axios({
        /* 歌手详情接口 */
        url: "/artist/fans?limit=8&id=" + this.id,
      })
        .then((res) => {
          this.fans = res.data.data;
          console.log(this.fans);
          if (this.fans.length > 0) {
            this.showFans = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSimiArtist() {
      this.axios({
        /* 歌手详情接口 */
        url: "/simi/artist?limit=8&id=" + this.id,
      })
        .then((res) => {
          this.artists = res.data.artists.slice(0, 12);
          console.log(this.artists);
          if (this.artists.length > 0) {
            this.showArtists = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getArtistDetail() {
      this.axios({
        /* 歌手详情接口 */
        url: "/artist/detail?id=" + this.id,
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.code = 200;
            this.artistDetail = res.data.data;
            this.albumSize = res.data.data.artist.albumSize;
            this.mvSize = res.data.data.artist.mvSize;
            this.briefDesc = res.data.data.artist.briefDesc;
            this.name = res.data.data.artist.name;
          } else if (res.data.code == 400 || res.data.code == 404) {
            this.code = 404;
          }
        })
        .catch((err) => {
          console.log(err);
          this.code = 404;
        });
    },
  },
};
</script>

<style>
.mod-ard {
  padding-top: 50px;
  background-color: var(--color-theme-light-5);
}
.ard-hd {
  position: relative;
  margin-bottom: 10px;
  width: 100%;
}
.ard-hd-bg {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.ard-bg-pic {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  filter: blur(10px);
}
.ard-hd-pic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 300px;
  width: 300px;
  border-radius: 50%;
  box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-align: center;
}
.ard-pic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}
.ard-title-box {
  height: 50px;
  line-height: 50px;
}
.ard-title {
  font-weight: 400;
}
.ard-hd-btn {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* ard-left */
.ard-left {
  float: left;
  margin-bottom: 30px;
  width: 850px;
}
.ard-nav {
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}
.ard-nav ul {
  width: 100%;
}
.ard-nav-item {
  position: relative;
  float: left;
  width: 25%;
  text-align: center;
}
.ard-nav-item h2 {
  font-weight: 400;
  font-size: 20px;
}
.ard-nav-item a {
  color: #999;
}
.ard-nav-item a:hover {
  color: var(--color-theme);
}
.ard-nav-item-current {
  background-color: var(--color-theme-light-4);
  border-radius: 10px 10px 0 0;
}
.ard-nav-item-current a {
  color: var(--color-theme);
}
.ard-router {
  width: 850px;
  background-color: var(--color-theme-light-4);
  border-radius: 15px;
}
.ard-router-l {
  border-radius: 0 15px 15px 15px;
}
.ard-router-r {
  border-radius: 15px 0 15px 15px;
}
/* ard-relative */
.ard-relative {
  float: right;
  width: 300px;
  overflow: hidden;
}
.ard-relative-box {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.ard-relative-hd {
  margin-bottom: 10px;
  font-weight: 400;
  height: 36px;
  line-height: 36px;
}
.ard-fans,
.ard-artists {
  width: 100%;
  margin-bottom: 20px;
}
.ard-fans-item,
.ard-artists-item {
  float: left;
  width: 65px;
  margin-right: 10px;
  margin-bottom: 15px;
}
.ard-fans-pic,
.ard-artists-pic {
  display: block;
  width: 65px;
  height: 65px;
}
.ard-fans-item img,
.ard-artists-item img {
  width: 65px;
  height: 65px;
}
.ard-fans-name,
.ard-artists-name {
  font-weight: 400;
  font-size: 13px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ard-fans-txt,
.ard-artists-txt {
  color: #999;
}
.ard-fans-txt:hover,
.ard-artists-txt:hover {
  color: var(--color-theme);
}
</style>